<template>
  <el-amap
    class="map"
    :amap-manager="amapManager"
    vid="amap-vue"
    lang="zh_cn"
    :zoom="zoom"
    :center="center"
  >
    <!-- 标记 -->
    <el-amap-marker :position="marker"></el-amap-marker>
    <el-amap-text
      :position="center"
      :text="address"
      :offset="addressOffset"
    ></el-amap-text>
  </el-amap>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
let { AMap } = window;
export default {
  name: "Ei-amap",
  data() {
    return {
      amapManager: amapManager,
      marker: [121.59996, 31.197646],
      center: [121.59996, 31.197646],
      zoom: 13,
      address: "",
      addressOffset: [-2, -54],
      map: null,
      mapObj: new AMap.Map("iCenter", {
        resizeEnable: true,
        zoom: 13,
      }),
    };
  },
  mounted() {
    // this.getCurrentPosition();
  },
  methods: {
    // 获取当前位置
    getCurrentPosition() {
      const _this = this;
      _this.map = new AMap.Map("container", {
        resizeEnable: true,
      });
      _this.map.plugin("AMap.Geolocation", function () {
        _this.geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：无穷大
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          buttonPosition: "RB",
        });
      });
      _this.map.addControl(_this.geolocation);
      _this.geolocation.getCurrentPosition();
      AMap.event.addListener(_this.geolocation, "complete", _this.onComplete); //返回定位信息
      AMap.event.addListener(_this.geolocation, "error", _this.onError); //返回定位出错信息
    },
    // 地图定位成功
    onComplete(data) {
      this.center = [data.position.getLng(), data.position.getLat()];
      this.marker = this.center;
      this.getPositionByLonLats(this.center);
    },
    // 地图定位失败
    onError() {
      console.log("定位失败");
    },
    // 根据坐标获取详细地址
    getPositionByLonLats(lnglatXY) {
      this.geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all",
      });
      this.geocoder.getAddress(lnglatXY, (status, result) => {
        if (status === "complete" && result.info === "OK") {
          this.address = result.regeocode.formattedAddress;
        } else {
          this.address = "";
          console.log("获取地址失败");
        }
      });
    },
    //根据名字地址去搜索结果
    placeSearch(name) {
      let MSearch;
      this.mapObj.plugin(["AMap.PlaceSearch"], () => {
        MSearch = new AMap.PlaceSearch({
          //构造地点查询类
          city: name, //城市
        });
        AMap.event.addListener(
          MSearch,
          "complete",
          this.keywordSearch_CallBack
        ); //返回地点查询结果
        MSearch.search(name); //关键字查询
      });
    },
    //结果的回调
    keywordSearch_CallBack(data) {
      let poiArr = data.poiList.pois || []
      console.log('poiArr',poiArr);
      poiArr = poiArr.filter(item=>{
        return item.address
      })
      if (poiArr.length > 0) {
        this.$emit("placeData", poiArr);
      } else {
        console.log("查询地址出错");
      }
    },
    // 更换坐标和地址
    changeCenter(arr) {
      this.center = arr;
      this.marker = arr;
      this.getPositionByLonLats(this.center);
    },
  },
};
</script>

<style lang="less" scoped>
</style>